<template>
    <div class="e1">
        <div class="p3">
            <div class="p4">
                <div>{{ $t('text.House.l246') }}</div>
                <DialogLayout30 :dataList="dataList" @returnData="returnData">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l26') }}</el-button>
                </DialogLayout30>
            </div>
            <div class="p5">
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l247') }}</div>
                    <div class="e4" v-if="dataList.cooperateStatus == '1'">{{ $t('text.DialogLayout.l108') }}</div>
                    <div class="e3" v-else-if="dataList.cooperateStatus == '0'">{{ $t('text.DialogLayout.l109') }}</div>
                    <div class="e3" v-else>-</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l248') }}</div>
                    <div class="e3">{{ dataList.innerUserName == null ? '-' : dataList.innerUserName }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l249') }}</div>
                    <div class="e3">{{ dataList.externalUserName == null ? '-' : dataList.externalUserName }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l250') }}</div>
                    <div class="e3">{{ dataList.externalUserPhone == null ? '-' : dataList.externalUserPhone }}</div>
                </div>
            </div>
        </div>

        <div class="p3">
            <div class="p4">
                <div>{{ $t('text.House.l251') }}</div>
                <DialogLayout31 :dataList="dataList" @returnData="returnData">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l26') }}</el-button>
                </DialogLayout31>
            </div>
            <div class="p5">
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l252') }}</div>
                    <div class="e3">{{ dataList.reportLifespan == null ? '-' : convertToTimeString(dataList.reportLifespan)
                    }}
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l253') }}</div>
                    <div class="e3">{{ dataList.aheadReportTime == null ? '-' :
                        convertToTimeString(dataList.aheadReportTime) }}
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l254') }}</div>
                    <div class="e3">{{ dataList.visitProtectTime == null ? '-' :
                        convertToTimeString(dataList.visitProtectTime) }}
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l255') }}</div>
                    <div class="e3">
                        {{ dataList.reportPhoneRule == null ? '-' : dataList.reportPhoneRule == '0' ?
                            $t('text.DialogLayout.l119') : dataList.reportPhoneRule == '1' ? $t('text.DialogLayout.l120') : '-'
                        }}
                    </div>
                </div>
            </div>
            <div class="p5">
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l256') }}</div>
                    <div class="e3">
                        {{ dataList.reportLifeRule == null ? '-' : dataList.reportLifeRule == '0' ?
                            $t('text.DialogLayout.l121') : dataList.reportLifeRule == '1' ? $t('text.DialogLayout.l122') : '-'
                        }}
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l257') }}</div>
                    <div class="e3">{{ dataList.reportExplain == null ? '-' : dataList.reportExplain
                    }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l258') }}</div>
                    <div class="e3">{{ dataList.visitExplain == null ? '-' : dataList.visitExplain
                    }}</div>
                </div>
                <div style="flex: 1;">
                </div>
            </div>
        </div>

        <div class="p3">
            <div class="p4">
                <div>{{ $t('text.House.l259') }}</div>
                <DialogLayout32 :dataList="dataList" @returnData="returnData">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l26') }}</el-button>
                </DialogLayout32>
            </div>
            <div class="p5">
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l260') }}</div>
                    <div class="e3">{{ dataList.reportKickback == null ? '' : dataList.reportKickback }}{{
                        dataList.reportKickbackUnit == null ? '%' : dataList.reportKickbackUnit == '0' ? '%' :
                        $t('text.DialogLayout.l125') }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l261') }}</div>
                    <div class="e3">{{ dataList.saleKickback == null ? '' : dataList.saleKickback }}{{
                        dataList.saleKickbackUnit == null ? '%' : dataList.saleKickbackUnit == '0' ? '%' :
                        $t('text.DialogLayout.l125') }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l262') }}</div>
                    <div class="e3">{{ dataList.signRatio == null ? '' : dataList.signRatio }}{{ dataList.signRatioUnit ==
                        null ? '%' : dataList.signRatioUnit == '0' ? '%' : $t('text.DialogLayout.l125') }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l263') }}</div>
                    <div class="e3">
                        {{ dataList.dutyRatio == null ? '' : dataList.dutyRatio }}
                        {{ dataList.dutyRatioUnit == null ? '%' : dataList.dutyRatioUnit == '0' ? '%' :
                            $t('text.DialogLayout.l125') }}
                    </div>
                </div>
            </div>
            <div class="p5">
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l264') }}</div>
                    <div class="e3">{{ dataList.kickbackExplain == null ? '-' : dataList.kickbackExplain }}</div>
                </div>
                <div style="flex: 1;">
                </div>
                <div style="flex: 1;">
                </div>
                <div style="flex: 1;">
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import { proxyGetByNewHouseId } from '../../http/api'
export default {
    name: 'ProxyRules',
    components: {
    },
    data() {
        return {
            dataList: {}
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        returnData() {
            this.getData()
        },
        getData() {
            proxyGetByNewHouseId({ newHouseId: this.$route.query.id }).then(
                res => {
                    if (res !== undefined) {
                        this.dataList = res
                        console.log(res)
                    }
                }
            ).catch()
        },
        //反向转换成带时间单位
        convertToTimeString(minutes) {
            if (minutes % (60 * 24) === 0) {
                // 可以被一天的分钟数整除，转换成天
                const days = minutes / (60 * 24);
                return `${days}${this.$t('text.DialogLayout.l116')}`;
            } else if (minutes % 60 === 0) {
                // 可以被一个小时的分钟数整除，转换成小时
                const hours = minutes / 60;
                return `${hours}${this.$t('text.DialogLayout.l117')}`;
            } else {
                // 不能被整除，直接转换成分钟
                return `${minutes}${this.$t('text.DialogLayout.l118')}`;
            }
        }
    },
    watch: {

    },
    computed: {

    }

}
</script>

<style scoped>
.e1 {
    height: 100%;
    width: 100%;
    flex-direction: column;
    display: flex;
}

.e2 {
    font-size: 12px;
    color: gray;
    text-align: left;
    padding-left: 35px;
}

.e3 {
    font-size: 13px;
    color: black;
    text-align: left;
    padding-left: 35px;
    padding-top: 3px;
    word-break: break-all;
}

.e4 {
    font-size: 13px;
    color: #6698ff;
    text-align: left;
    padding-left: 35px;
    padding-top: 3px;
}

.p2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.p3 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
}

.p4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p5 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.p6 {
    border: none;
    color: gray;
    outline: none;
    padding-top: 10px;
    padding-left: 10px;
}

.p7 {
    display: flex;
}
</style>